<template>
  <div>
    <v-loading :showLoading="showLoading"></v-loading>
    <div class="fun-lists" ref="content" id="content" v-if="jouItem">
      <ul class="fun-detail">
        <li class="fun-item">
          <div class="fun-lable-pic">
            <q-gallery-slider dots :src="jouItem.imgList"></q-gallery-slider>
            <!--q-slider  infinite autoplay  dots class="text-white">
              <div slot="slide" class="centered" v-for="cover in jouItem.imgList" v-bind:key="cover">
                <img v-bind:src="cover" class="fun-title-pic" />
              </div>
            </q-slider>-->
            <ul class="fun-lable-lists">
              <li class="fun-lable-item" v-for="label in jouItem.labels" v-bind:key="label">{{label}}</li>
            </ul>
          </div>
          <h1 class="fun-item-title fun-detail-title">{{jouItem.title}}</h1>
          <div class="fun-item-content">
            <div class="price price-detail">
              <div class="price-detail-left">
                <p>出发地：{{jouItem.leavePlace}}</p>
                <p>目的地：{{jouItem.arrivePlace}}</p>
              </div>
              <div class="price-detail-right">
                <span class="price-num">{{jouItem.like}}</span>人想去
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="detail-content">
        <img src="../../assets/detailpage.png" class="fun-title-pic" style="width:100%"/>
      </div>
    </div>
    <!--返回底部-->
    <i class="back-to-bottom" @click="goToBottom()" v-if="isShow"></i>
    <div slot="footer">
      <v-footer :islike="isLike" v-on:likeGo="addLikeNumber"></v-footer>
    </div>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {setWechatTitle} from '../../common/js/common'
  import Loading from '../loading/index'
  import Footer from '../footer/footer'
  export default({
    props: {
      jounery: {
        type: Object
      }
    },
    data () {
      return {
        isShow: false,
        jouItem: null,
        isLike: false,
        showLoading: false
      }
    },
    computed: {
      getItem () {

      }
    },
    beforeCreate () {

    },
    created () {
      this.fetchData()
    },
    mounted () {
    },
    methods: {
      fetchData () {
        /* 根据JouneryId获取旅游的详情 */
        let id = this.$route.params.id
        if (!id) {
          // AlertDialog('警告', '请选择您要看的旅游项目')
        }
        let param = {id: id}
        this.showLoading = true
        let result = HttpRequest(linklist.jouneryDetailUrl, param)
        result.then((response) => {
          this.jouItem = response.body
          this.showLoading = false
          this.$nextTick(function () {
            this.isShowButton()
            setWechatTitle(this.jouItem.title)
          })
        }, (response) => {
          this.showLoading = false
        }).catch((response) => {
          this.showLoading = false
        })
      },
      showbut () {
        this.$nextTick(function () {
          console.log(this.$refs.content.scrollHeight)
        })
      },
      isShowButton () {
        /* 判断是否需要显示返回底部按钮 */
        setTimeout(() => {
          let dheight = this.$el.querySelector('#content').scrollHeight
          let screenHei = window.screen.height
          console.log(dheight, screenHei)
          if (dheight < screenHei) {
            this.isShow = false
          }
          else {
            this.isShow = true
          }
        }, 0)
      },
      goToBottom () {
        /* 返回到页面底部 */
        let dheight = this.$el.querySelector('#content').scrollHeight
        this.$el.querySelector('#content').scrollTop = dheight
        // document.documentElement.scrollTop = dheight
      },
      addLikeNumber () {
        this.isLike = !this.isLike
        this.isLike ? this.jouItem.like++ : this.jouItem.like--
      }
    },
    components: {
      'v-footer': Footer,
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./index.styl"
</style>
